/**
 * Charts1：总体情况
 */
import React  from 'react'
import style from './index.less'
import echarts from 'echarts'

import {IECharts} from '../../../../components'

const Charts1=({
	name='堆叠条形图',
	data={
		name:['X1','X2','X3','X4','X5'],
		data:[
			['直接访问',320, 302, 301, 334, 390],
		  ['邮件营销',120, 132, 101, 134, 90]
		]
	},
	height=data.name.length*40>300?data.name.length*40:300,
  dispatch,location,tag
})=>{
	const myProps={
		onEvents:{
			click:function(params){
				console.log(params.name);
				// const timestamp=Date.parse(new Date())/1000
				dispatch({
					type: `${tag}/changeRouter`,
					payload:{
						pathname:`${location.pathname}Details`,
						query:{
							jobName:params.name,
						}
					}
				})
			}
		},
		option : {
			color:['#5ab1ef', '#d87a80', '#91c7ae','#749f83',  '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],
	    legend: {
	        data: data.data.map(item=>item[0])
	    },
			tooltip : {
	        trigger: 'axis',
					confine:true,
	        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
	            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
	        },
	        // formatter: function (params){
	        //     return params[0].name + '<br/>'
	        //            + params[0].seriesName + ' : ' + params[0].value + '<br/>'
	        //            + params[1].seriesName + ' : ' + (params[1].value + params[0].value);
	        // }
	    },
	    grid: {
	        left: '3%',
	        right: '4%',
	        bottom: '3%',
	        containLabel: true
	    },
	    xAxis:  {
	        type: 'value'
	    },
	    yAxis: {
	        type: 'category',
	        data: data.name
	    },
	    series: data.data.map((item,i)=>{
				return {
					name: item[0],
					type: 'bar',
					stack: '总量',
					barWidth :25,
					label: {
						normal: {
									 show: true
							 }
					},
					data: item.slice(1)
				}
			})
		}
	}
  return(
    <div  className={`chart ${style.chart}`} style={{height}}>
      <IECharts {...myProps} resizable={true}/>
    </div>
  )
}

Charts1.propTypes={
	// data
}

export default Charts1
